<template>
  <div id="home-page">
    <!-- 功能区 -->
    <div class="dir">
      <div class="logo">
        <img src="../../static/icon/pods-gray.png" alt="">
      </div>
      <el-tabs v-model="activeTab">
        <el-tab-pane label="播放列表" name="1"></el-tab-pane>
        <el-tab-pane label="我的收藏" name="2"></el-tab-pane>
        <el-tab-pane label="历史播放" name="3"></el-tab-pane>
      </el-tabs>

      <!-- 手机端歌曲名和歌手名 -->
      <div class="music-info">
        <template v-if="currentPlayMusicIndex!==-1">
          <span>{{ playList[currentPlayMusicIndex].title || '' }}</span>
          <span>{{ playList[currentPlayMusicIndex].artist || '' }}</span>
        </template>
      </div>

      <!-- 手机端搜索 -->
      <div class="mobile-search search-btn" @click="mobileSearch">
        <i class="el-icon-search"></i>
      </div>

      <!-- 搜索 -->
      <span class="search-btn" @click="showSearchPanel" title="搜索">
        <i class="el-icon-search"></i>
      </span>
    </div>

    <div class="middle">
      <div class="middle-left">

        <!-- 播放列表 -->
        <playList v-show="activeTab === '1'" class="animate__animated animate__bounceInUp" :searchChooseList="searchChoose" :playMusicIndex="currentPlayMusicIndex"></playList>

        <!-- 收藏列表 -->
        <lovedList v-show="activeTab === '2'" class="animate__animated animate__bounceInUp" :searchChooseList="searchChoose" :playMusicIndex="currentPlayMusicIndex"></lovedList>

        <!-- 历史播放 -->
        <recordList v-show="activeTab === '3'" class="animate__animated animate__bounceInUp" :searchChooseList="searchChoose" :playMusicIndex="currentPlayMusicIndex"></recordList>
      </div>

      <!-- 封面+歌词 -->
      <div class="img-lyrics">
        <img class="needle" ref="needle" src="" onerror="this.src='./static/img/needle.png'" alt="唱针" />
        <div class="img-wrap" ref="imgWrap" :style="{'animation-play-state': animationShow}" @click="switchImgLyrics(1)">
          <img class="animate__animated animate__fadeIn" :src="currentSongImg" onerror="this.src='./static/img/record-1.png'" />
        </div>
        <div @click="switchImgLyrics(0)">
          <lyricTmp ref="lyrictmp" height="280px"></lyricTmp>
        </div>
      </div>
    </div>

    <!-- 播放器 -->
    <div class="player_wrap">
      <playerTmp ref="player" :musicList="playList.length === 0 ? musicPlayList : playList" :currentMusicIndexFromParent="currentPlayMusicIndex"></playerTmp>
    </div>

    <!-- 搜索展示 -->
    <el-drawer :visible.sync="searchPanel" :with-header="true" direction="rtl">

      <!-- 搜索框 -->
      <template slot="title">
        <input ref="searchInput" class="search-input" type="text" v-model="searchKey" placeholder="请输入..." @keyup.enter="getMusicFromAll">
        <i class="el-icon-search" @click="getMusicFromAll"></i>
      </template>

      <!-- 搜索来源选择 -->
      <div class="search-source">
        <span class="title">请选择搜索来源：</span>
        <el-radio-group v-model="searchType" size="mini" fill="transparent">
          <el-radio-button v-for="v in searchChoose" :label="v.n" :key="v.s" :title="v.s">
            <img :src="v.i" :alt="v.s">
          </el-radio-button>
        </el-radio-group>
      </div>

      <!-- 搜索列表 -->
      <searchList ref="searchList" :searchKey="searchKey" :searchType="searchType" :panelShowOrClose="searchPanel"></searchList>
    </el-drawer>
  </div>
</template>

<script>
import searchList from './SearchList'
import playList from './PlayList'
import lovedList from './LovedList'
import recordList from './RecordList'
import lyricTmp from './LyricTmp'
import playerTmp from './PlayerTmp'
import { mapState, mapMutations } from 'vuex'

export default {
  name: "HelloWorld",
  directives: {
    // 'el-table-infinite-scroll': elTableInfiniteScroll
  },
  components: {
    lyricTmp,
    playerTmp,
    playList,
    lovedList,
    recordList,
    searchList
  },
  computed: {
    ...mapState([
      'currentPlayMusicIndex',
      'playList',
      'currentSongImg',
      'isPlaying',
      'currentMusicTitle',
      'currentMusicArtist',
    ]),
  },
  data () {
    return {
      activeTab: '1',
      searchKey: "周杰伦",
      searchPanel: false, // 搜索面板展开
      searchPanelAnimation: '', // 搜索动画
      searchType: '1', // 自动搜索方式
      musicPlayList: [  // 当前播放列表为空时，展示的占位列表
        // 默认初始值，占据空间
        {
          title: '$',
          artist: '$',
          src: './static/music/init.mp3' // 空音频占位，防止报错
        }
      ],
      searchChoose: [
        { s: '', i: '', n: '-1' }, // 第一项错乱的问题，用来占位
        { s: '咪咕音乐', i: './static/icon/migu.png', n: '1' },
        { s: '酷狗音乐', i: './static/icon/kugou.png', n: '0' },
        { s: 'QQ音乐', i: './static/icon/qq.png', n: '2' },
        { s: '网易云音乐', i: './static/icon/wangyiyun.png', n: '3' },
        { s: '酷我音乐', i: './static/icon/kuwo.png', n: '4' }
      ], // 搜索可选项
      searchListLoad: false, // 搜索列表懒加载
      animationShow: 'paused', // 光盘旋转
      showImg: true, // 显示歌曲封面
      showLyrics: true, // 显示歌曲歌词
      currentPageWidth: 0, // 当前页面宽度
    };
  },
  watch: {
    currentSongImg: {
      handler (newVal, oldVal) {
        // document.body.style.setProperty("--bckIMG", 'url(' + newVal + ')')
        // 更改页面背景为当前歌曲专辑封面
        // document.body.style.backgroundImage = 'url(' + newVal + ')'
        document.body.style.setProperty("--BGD-1", 'url(' + newVal + ')')
        // 更改搜索面板背景
        document.body.style.setProperty("--BGD-r-1", 'url(' + newVal + ')')
        // 更改搜索背景明度
        document.body.style.setProperty("--BGD-r-brt", '0.3')
        if (this.currentPageWidth > 1000) {
          document.body.style.setProperty("--blur", '30px')
        } else {
          document.body.style.setProperty("--blur", '10px')
        }
      }
    },
    isPlaying: {
      handler (newVal, oldVal) {
        if (newVal) {
          this.animationShow = 'running'
          this.$refs.needle.style.transform = 'rotate(35deg)'
        } else {
          this.animationShow = 'paused'
          this.$refs.needle.style.transform = 'rotate(0deg)'
        }
      }
    },
    currentPageWidth: {
      handler (newVal, oldVal) {
        if (newVal > 1000) {
          this.$refs.lyrictmp.$el.style.display = 'block'
          this.$refs.imgWrap.style.display = 'block'
        } else if (oldVal > 1000) {
          this.switchImgLyrics(0)
        }
      }
    }
  },
  mounted () {
    window.onresize = () => {
      return (() => {
        this.currentPageWidth = document.documentElement.clientWidth
      })()
    }
    this.currentPageWidth = document.documentElement.clientWidth
  },
  methods: {
    // 打开搜索面板
    showSearchPanel () {
      this.searchPanel = true
      this.$nextTick(() => {
        this.$refs.searchInput.focus()
      })
    },

    // 手机端搜索
    mobileSearch () {
      // this.$router.push({ path: '/mobileSearch' })
      this.searchPanel = true
      this.$nextTick(() => {
        this.$refs.searchInput.focus()
      })
    },

    // 手机端歌词和图片相互切换
    switchImgLyrics (v) {
      // 页面宽度小于1000再执行
      if (this.currentPageWidth > 1000) return
      if (v === 1) {
        this.$refs.lyrictmp.$el.style.display = 'block'
        this.$refs.imgWrap.style.display = 'none'
      } else {
        this.$refs.lyrictmp.$el.style.display = 'none'
        this.$refs.imgWrap.style.display = 'block'
      }

    },

    // 监听搜索框获取焦点的 
    searchInputEnter () {
      console.log(1)
    },

    // 搜索按钮点击
    getMusicFromAll () {
      this.$refs.searchList.searchMusic()
    },

    // 提示信息
    showMessage (text) {
      this.$notify({
        dangerouslyUseHTMLString: true,
        message: '<strong style="color: #000; font-size: 20px;"><i>' + text + '</i></strong>',
        duration: 1500,
        showClose: false
      })
    },
  }
};
</script>

<style scoped lang="scss">
@import ".././css/home-page.scss";
</style>
